<script setup>
import VirtualizeTable from '@/common/lty-table/VirtualizeTable.vue'
import SvgIcon from '@/common/svg-icon/SvgIcon.vue'
import { useOperate } from '@/stores/operate'
const router = useRouter()
const operateStore = useOperate()

// 传入表格组件的配置项
const table_config = ref({
  thead: [
    {
      label: '角色名称',
      prop: 'name'
    },
    {
      label: '说明',
      prop: 'description'
    },
    {
      label: '管理范围',
      prop: 'menuNameList'
    }
  ],
  filter_Config: {},
  SpecialField: ['menuNameList'],
  paging: true,
  num: true,
  expend: true,
  isoperate: false,
  operatewidth: '152px',
  ispagination: true,
  methodName: 'getRole'
})

const RoleTypeObj = {
  2: '新增',
  3: '编辑',
  4: '删除'
}

// 跳转至操作界面 status=> 1:新增 2:编辑 3:删除
const operate = (type, data) => {
  operateStore.setType(type)
  operateStore.setForm(data)
  operateStore.setName('role')
  operateStore.setTypeObj(RoleTypeObj)
  router.push('/operate')
}
</script>

<template>
  <div class="flex h-full flex-col">
    <div class="mb-[20px]">
      <el-button type="success" class="button_addTo" @click="operate(2, {})"
        >新增角色</el-button
      >
    </div>
    <div class="flex-1">
      <VirtualizeTable :table_config="table_config">
        <template #expend="{ row }">
          <div class="flex items-center px-[24px] py-[22px]">
            <span class="mt-[2px] whitespace-nowrap text-[--theme]"
              >管理范围:
            </span>
            <span class="mt-[2px]">「{{ row.menuNameList.length }}」</span>
            <div class="flex flex-wrap">
              <span
                v-for="(item, index) in row.menuNameList"
                :key="index"
                class="ml-3 mt-[2px] rounded bg-[#2DF2FF80] px-[8px] py-[4px] text-sm"
                >{{ item }}</span
              >
            </div>
          </div>
        </template>
        <template #menuNameList="{ row }">
          {{ row.menuNameList.length }}大模块
        </template>
        <template #operate="{ row }">
          <div class="flex px-[23px]">
            <svg-icon
              name="icon-system-button-bianji"
              width="32px"
              height="32px"
              class="mr-3 cursor-pointer rounded-full border border-[#5E9DB4] p-[8px]"
              @click="operate(3, row)"
            />
            <svg-icon
              name="icon-system-button-shanchu"
              width="32px"
              height="32px"
              class="cursor-pointer rounded-full border border-[#5E9DB4] p-[8px]"
              @click="operate(4, row)"
            />
          </div>
        </template>
      </VirtualizeTable>
    </div>
  </div>
</template>

<style lang="less" scoped></style>
